<script setup>
import { useRouter } from 'vue-router'
import { useChatListStore } from '@renderer/store/chatList'

import Search from '@renderer/components/common/Search.vue'
import FriendsList from '@renderer/components/common/FriendsList.vue'

import DefaultImage from '@renderer/assets/svg/panda_wander.svg'

const chatListStore = useChatListStore()
const router = useRouter()

function openChatWindow(id) {
    chatListStore.activeID = id
    router.push({ name: 'chattingView', params: { id } })
}

function openChatListContextMenu(id) {
    $menu.open('chatlist', (command) => {
        switch (command) {
            case 'delete':
                if (id == chatListStore.activeID) {
                    chatListStore.activeID = '000000'
                    router.push({ name: 'chat' })
                }
                chatListStore.deleteOne(id)
                break
        }
    })
}
</script>

<template>
    <div class="chat-container">
        <div class="left-panel">
            <div class="placeholder-top"></div>
            <search v-model="chatListStore.query" placeholder="搜索" class="chat-search" />
            <friends-list
                class="chat-list"
                :data="chatListStore.filteredData"
                :active-i-d="chatListStore.activeID"
                @selected="openChatWindow"
                @rightclicked="openChatListContextMenu"
            />
        </div>
        <div class="right-panel">
            <div class="right-panel-content">
                <router-view />
                <div v-if="chatListStore.activeID == '000000'" class="default-image">
                    <img :src="DefaultImage" />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@import '@renderer/assets/scss/mixins';
@import '@renderer/assets/scss/constants';

$searchbar-margin-top: 5px;
$left-panel-width: 270px;
$chatlist-searchbar-height: 33px;
$chatlist-padding: 15px;
$gap-between-searchbar-chatlist: 13px;
$default-image-offset: 150px;

.placeholder-top {
    background-color: var(--bg-color-2);
    height: $HEADER-HEIGHT;
    position: absolute;
    top: 0px;
    width: $left-panel-width;
}

.chat-container {
    @include overspread;
    display: flex;

    .left-panel {
        @include set-size($width: $left-panel-width);
        background-color: var(--bg-color-2);
        display: flex;
        flex-direction: column;
        align-items: center;

        .chat-search {
            @include set-size(
                $width: calc(100% - 2 * $chatlist-padding),
                $height: $chatlist-searchbar-height
            );
            margin-top: $searchbar-margin-top;
        }

        .chat-list {
            width: 100%;
            margin-top: $gap-between-searchbar-chatlist;
        }
    }

    .right-panel {
        @include set-size($width: calc(100% - $left-panel-width));
        flex-grow: 1;
        background-color: var(--bg-color-1);
        display: flex;
        flex-direction: column;

        .right-panel-content {
            @include overspread;
            flex-grow: 1;
            // border-top: 1px solid var(--border-color);

            .default-image {
                @include set-size($height: calc(100% - $default-image-offset));
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>
